<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="教育基金" name="first">
          <el-form
            ref="educationalFundForm"
            :model="educationalFundForm"
            label-width="100px"
            style="padding: 10px 0 0 10px"
          >
            <el-form-item label="教育基金开关">
              <el-radio-group v-model="educationalFundForm.status" size="medium">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="一级返佣比例">
              <el-input-number
                v-model="educationalFundForm.oneLevel"
                controls-position="right"
                :precision="0"
                :min="0"
                :max="100"
                :step="1"
              />
            </el-form-item>
            <el-form-item label="二级返佣比例">
              <el-input-number
                v-model="educationalFundForm.twoLevel"
                controls-position="right"
                :precision="0"
                :min="0"
                :max="100"
                :step="1"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitEducationalFundSetting">提交</el-button>
              <el-button @click="resetEducationalFundForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="月度市场补贴" name="second">
          <el-form
            ref="distributionForm"
            :model="distributionForm"
            :inline="true"
            label-width="100px"
          >
            <el-form-item label="月度市场补贴开关" label-width="150px">
              <el-radio-group v-model="distributionForm.status" size="medium">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row v-for="(domain, index) in distributionForm.distributions" :key="domain.key" :gutter="20">
              <el-col :span="24" :xs="24">
                <el-form-item
                  :label="'业绩等级' + (index+1)"
                  :rules="{
                    required: true, message: '业绩等级不能为空', trigger: 'blur'
                  }"
                >
                  <el-form-item label="达标金额(单位：W)" label-width="150px">
                    <el-input-number
                      v-model="domain.money"
                      controls-position="right"
                      :precision="0"
                      :min="0"
                      :step="1"
                    />
                  </el-form-item>
                  <el-form-item label="分润比例">
                    <el-input-number
                      v-model="domain.ratio"
                      controls-position="right"
                      :precision="2"
                      :min="0"
                      :max="1"
                      :step="0.01"
                    />
                  </el-form-item>
                  <el-button v-if="distributionForm.distributions.length === (index+1)" type="primary" @click="addDistribution">新增</el-button>
                  <el-button @click.prevent="removeDistribution(domain)">删除</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button v-if="distributionForm.distributions.length === 0" type="primary" @click="addDistribution">新增</el-button>
              <el-button v-if="distributionForm.distributions.length > 0" type="primary" @click="onSubmitDistribution">立即提交</el-button>
              <el-button @click="resetDistribution">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getEducationalFundSetting, saveEducationalFundSetting } from '@/api/admin/sysConfig'
import { listDistribution, submitDistribution } from '@/api/sms/distribution'

export default {
  name: 'Index',
  data() {
    return {
      activeName: 'first',
      educationalFundForm: {
        status: true,
        oneLevel: 0,
        twoLevel: 0
      },
      distributionForm: {
        status: true,
        distributions: []
      }
    }
  },
  async created() {
    this.getEducationalFundSettingInfo()
  },
  methods: {
    getEducationalFundSettingInfo() {
      getEducationalFundSetting().then(res => {
        this.educationalFundForm = res.data
      })
    },
    onSubmitEducationalFundSetting() {
      saveEducationalFundSetting(this.educationalFundForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getEducationalFundSettingInfo()
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
      if (tab === 'first') {
        this.getEducationalFundSettingInfo()
      } else {
        this.getDistributionList()
      }
    },
    resetEducationalFundForm() {
      this.educationalFundForm = {
        status: true,
        oneLevel: 0,
        twoLevel: 0
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getDistributionList() {
      listDistribution().then(res => {
        this.distributionForm.distributions = res.data.list
        this.distributionForm.status = res.data.status
      })
    },
    addDistribution() {
      this.distributionForm.distributions.push({
        money: 0,
        ratio: 0
      })
    },
    removeDistribution(item) {
      const index = this.distributionForm.distributions.indexOf(item)
      if (index !== -1) {
        this.distributionForm.distributions.splice(index, 1)
      }
    },
    resetDistribution() {
      this.getDistributionList()
    },
    onSubmitDistribution() {
      submitDistribution(this.distributionForm).then(res => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.getDistributionList()
      })
    }
  }
}
</script>

<style scoped>

</style>
